import React, { useEffect } from 'react';
import styles from './index.less';
import { Select } from 'antd';
import { useSetState } from 'ahooks';
import { getTimesPoint, initTime } from '../../helper';

const allOptions = initTime();
export const PeriodPicker = ({
  options,
  startTimeValue = 1,
  endTimeValue = 1,
  onChange,
  list = [],
  disabled = false,
}) => {
  const onChangeFun = (v, key) => {
    onChange?.(v.label, key);
  };

  // 日内的情况选择的时间段不能超出搜索时间段的范围
  // const getDisabledFun = (time) => {
  //     if (type !== 'dayahead' && time) {
  //         let start = hourOrder.split('-')[0];
  //         let end = hourOrder.split('-')[1];
  //         start = getTimesPoint(start)
  //         end = getTimesPoint(end)
  //
  //         if (time < start || time > end) return 2;
  //     } else {
  //         return 0
  //     }
  // };

  // 根据开始时间和结束时间判断是否有冲突，有冲突则显示红色
  const getLeftStyleFun = () => {
    let count = 0;
    list.forEach((i) => {
      const leftValue = getTimesPoint(i.startOrder);
      const endValue = getTimesPoint(i.endOrder);
      if (startTimeValue >= leftValue && startTimeValue <= endValue) count++;
      if (startTimeValue > endTimeValue) count += 2;
    });
    return count <= 1 ? {} : { color: '#eb5757' };
  };

  // 根据开始时间和结束时间判断是否有冲突，有冲突则显示红色
  const getRightStyleFun = () => {
    let count = 0;
    list.forEach((i) => {
      const leftValue = getTimesPoint(i.startOrder);
      const endValue = getTimesPoint(i.endOrder);
      if (endTimeValue >= leftValue && endTimeValue <= endValue) count++;
      if (startTimeValue > endTimeValue) count += 2;
    });
    return count <= 1 ? {} : { color: '#eb5757' };
  };

  return (
    <div className={styles.picker}>
      <Select
        onClick={(e) => e.stopPropagation()}
        disabled={disabled}
        showArrow={false}
        dropdownMatchSelectWidth={60}
        value={startTimeValue}
        options={options || allOptions}
        onChange={(_, v) => onChangeFun(v, 'startOrder')}
      />
      -
      <Select
        onClick={(e) => e.stopPropagation()}
        disabled={disabled}
        dropdownMatchSelectWidth={60}
        showArrow={false}
        value={endTimeValue}
        options={options || allOptions}
        onChange={(_, v) => onChangeFun(v, 'endOrder')}
      />
    </div>
  );
};
